import React, { Component} from 'react'
import { Redirect} from 'react-router-dom'

import {
    WhiteSpace, WingBlank,
    Button, InputItem, TextareaItem,
    List, Badge, Icon, Grid, Modal,
    Toast, Result, NavBar, TabBar
} from 'antd-mobile'

import { connect} from 'react-redux'
import { login} from '../../redux/actions'
import Logo from '../../components/logo/logo'
const ListItem = List.Item

class Login extends Component{

    //定义状态  获取数据 每个 输入框 的 信息
    state = {
        username: '',
        paw: ''
    }


    loginSuccess = () => {
        this.props.login(this.state, this.remin)
    }

    //在这里定义一个 提示的 函数
    remin = (msg) => {
        Toast.fail(msg, 1)
    }

    //跳转到注册页面
    toRegister = () => {
        this.props.history.replace('/register')
    }
    
    
    loginClick = (key, val) => {
        this.setState({
            [key]: val
        })
    }

    render(){
        const { redirectTo} = this.props.user
        //如果 登陆成功 跳转到相应的 页面
        if(redirectTo){
            return <Redirect to={ redirectTo}/>
        }
        return(
            <div>
                <NavBar className='NavTop'>Jie&nbsp;&nbsp;招聘</NavBar>
                <Logo />
                <WingBlank>
                    <List>
                        <WhiteSpace size='md'/>
                        <InputItem placeholder='请输入用户名' onChange={val => {this.loginClick('username', val)}}>用&nbsp;户&nbsp;名&nbsp;:</InputItem>
                        <WhiteSpace size='md'/>
                        <InputItem type='password' placeholder='请输入密码' onChange={val => {this.loginClick('paw', val)}}>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;:</InputItem>
                        <WhiteSpace size='lg'/>
                        <Button type='primary' onClick={this.loginSuccess}>登陆</Button>
                        <WhiteSpace size='lg'/>
                        <Button onClick={this.toRegister}>没有账户？注册</Button>
                    </List>
                </WingBlank>
            </div>
        )
    }
}

export default connect(
    state =>({ user:state.user}),
    { login}
)(Login)

